

import { connect } from 'react-redux';
import { Button, Form, Input, Radio, message } from 'antd'
import { createRef } from 'react';

import {
    creation_wrapper,
    creation_title,
} from './index.module.css'
import { postGrouptCreate } from '../../assets/js/api';


function GroupCreate(props) {

    const { user } = props;
    const { closeAllModal } = props;
    
    const form = createRef();
    const initFormVal = {
        group_name: '',
        introduction: '',
        public: '1'
    }

    function postGroupCration() {
        form.current.validateFields()
        .then(val => {
            const params = {...val, user_id:user.id}
            console.log(params)
            postGrouptCreate(params)
            .then(res => {
                const { code, message: msg, data } = res.data;
                if (code === 1) {
                    message.success(msg);
                    closeAllModal();
                }
                else {
                    message.error(msg);
                }
            })
            .catch(err => {
                console.log(err);
                message.error('error');
            })
        })
        .catch(err => {
            console.log(err);
            message.error('error');
        });
    }
    
    return (
        <div className={creation_wrapper}>
            <div className={creation_title}>创建群组</div>
            <Form
                labelCol={{span:3}}
                ref={form}
				initialValues={initFormVal}
                scrollToFirstError={true}
                onFinish={postGroupCration}
                style={{color: '#fff'}}
            >
                    <Form.Item 
                    label="群组名"
                    name="group_name"
                    hasFeedback
					rules={[
                        { required: true, validateTrigger:'onBlur', type: 'string', message: '请输入群组名' },
                        { validateTrigger:['onBlur', 'onChange', ], type: 'string', max: 16, message: '群组名不能超过16个中文或字符' },
                    ]}
                >
                    <Input placeholder="请输入群组名" />
                </Form.Item>
                <Form.Item label="群组简介" name="introduction">
					<Input.TextArea rows={3} showCount maxLength={100} placeholder="群组简介" />
				</Form.Item>
                <Form.Item 
                    label="是否公开查找" 
                    name="public"
                    hasFeedback
                    rules={[
                        { required: true, validateTrigger:['onBlur', 'onChange', ], type: 'string', message: '密码不能超过16个中文或字符' },
                    ]}
                >
                    <Radio.Group defaultChecked="1">
						<Radio value="1">是</Radio>
						<Radio value="0">否</Radio>
					</Radio.Group>
				</Form.Item>
                <Form.Item wrapperCol={{ offset: 10, span: 16 }}>
                    <Button type="primary" htmlType="submit" style={{backgroundColor: '#585858',borderColor: '#585858'}}>创建</Button>
                </Form.Item>
            </Form>
        </div>
    )
}


function mapStateToProps(state) {
    return {
        user: state.user
    }
}

export default connect(
    mapStateToProps,
    {

    }
)(GroupCreate);
